{% extends 'base-layer.html' %}
{% load staticfiles %}

{% block css %}
<link rel="stylesheet" href="{% static 'js/plugins/layer/skin/layer.css' %}">
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap-datetimepicker.min.css' %}">
<link rel="stylesheet" href="{%static 'plugins/select2/select2.min.css' %}">
{% endblock %}

{% block main %}
<div class="box box-danger">
	<form class="form-horizontal" id="addForm" method="post">
		{% csrf_token %}
		<input type="hidden" name='id' value="{{ user.id }}" />
		<input type="hidden" name='user' value="save" />
		<div class="box-body">
          <fieldset>
            <legend>
              <h4>基本信息</h4>
            </legend>
            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-3">
                    <input class="form-control" name="name" type="text" value="{{ user.name }}"/>
                </div>
                <label class="col-sm-2 control-label">性别</label>
                <div class="col-sm-3">
                  <select class="form-control" name="gender">
                    <option value={{ user.gender }}> {{ user.get_gender_display }} </option>
                    <option value="male">男</option>
                    <option value="famale">女</option>
                  </select>
                </div>

            </div>

            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">生日</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control pull-right form_datetime" name="birthday"
                           value="{{ user.birthday|date:"Y-m-d" }}"/>
                </div>
                <label class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control" name="username" readonly="readonly" value="{{ user.username }}"/>
                </div>
            </div>
            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">状态</label>
                <div class="col-sm-6">
                    <label class="control-label">
                      <input type="radio" class="minimal" name="is_active"  value="True" {% ifequal user.is_active True %}checked{% endifequal %}>启用
                    </label>
                    <label class="control-label">
                      <input type="radio" class="minimal" name="is_active"  value="False" {% ifequal user.is_active False %}checked{% endifequal %}>禁用
                    </label>
                </div>
            </div>
            <legend>
              <h4 clase="">联系信息</h4>
            </legend>
            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">手机</label>
                <div class="col-sm-3">
                    <input class="form-control" name="mobile" readonly="readonly" type="text" value="{{ user.mobile }}"/>
                </div>
                <label class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-3">
                    <input class="form-control" name="email" type="text" value="{{ user.email }}"/>
                </div>
            </div>
            <legend>
              <h4>职员信息</h4>
            </legend>
            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">入职日期</label>
                <div class="col-sm-3">
                    <input type="text" class="form-control pull-right form_datetime" name="joined_date"
                    value="{{ user.joined_date|date:"Y-m-d" }}"/>
                </div>
                <label class="col-sm-2 control-label">部门</label>
                <div class="col-sm-3">
                  <select class="form-control select2" style="width:100%;" name="department">
                  <option value="{{ user.department.id }}">{{ user.department.title|default:"--部门--"}}</option>
                  {% for structure in structures %}
                  <option value="{{ structure.id }}">{{ structure.title }}</option>
                  {% endfor %}
                 </select>
                 </div>

            </div>
            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">岗位</label>
                <div class="col-sm-3">
                    <input class="form-control" name="post" type="text" value="{{ user.post|default_if_none:"" }}"/>
                </div>
                <label class="col-sm-2 control-label">上级</label>
                <div class="col-sm-3">
                  <select class="form-control select2" style="width:100%;" name="superior">
                  <option value="{{ user.superior.id }}">{{ user.superior.name|default:"--上级--"}}</option>
                  {% for user in users %}
                  <option value="{{ user.id }}">{{ user.name }}</option>
                  {% endfor %}
                 </select>
                 </div>

            </div>

            <div class="form-group has-feedback">
                <label class="col-sm-2 control-label">所属角色组</label>
                <div class="col-sm-6">
                    {% for role in roles %}
                    <label class="control-label">
                      <input type="checkbox" class="minimal" name="roles" value="{{ role.id }}" {% if role in user_roles %}checked{% endif %}>
                        {{ role.title }}
                    </label>
                    {% endfor %}
                </div>
            </div>
          </fieldset>

		</div>
		<div class="box-footer ">
			<div class="row span7 text-center ">
              <button type="button" id="btnCancel" class="btn btn-default margin-right " >重置</button>
              <button type="button" id="btnSave" class="btn btn-info margin-right " >保存</button>
			</div>
		</div>

	</form>
</div>

{% endblock %}

{% block javascripts %}
<script src="{% static 'bootstrap/js/bootstrap-datetimepicker.js' %}"></script>
<script src="{% static 'plugins/select2/select2.full.min.js' %}"></script>
<script type="text/javascript">

	$("#btnSave").click(function(){
		var data = $("#addForm").serialize();
		$.ajax({
			type: $("#addForm").attr('method'),
			url : "/system/basic/user/update",
			data : data,
			cache: false,
			success : function(msg) {
				if (msg.status == 'success'){
					layer.alert('数据保存成功！', {icon: 1},function(index){
					    parent.layer.closeAll(); //关闭所有弹窗
                    });
				}else if(msg.status =='fail'){
					layer.alert('数据保存失败', {icon: 5});
                    //$('errorMessage').html(msg.message)
				}
				return ;
			}
		});
	});


	/*点取消刷新新页面*/
    $("#btnCancel").click(function () {
	    window.location.reload();

    })


/*input 时间输入选择*/
    $(".form_datetime").datetimepicker({
            language:  'zh',
            minView: 'month', //选择范围知道日期，不选择时分
            //weekStart: 1,
            //todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            //startView: 2,
            forceParse: 0,
            showMeridian: 1,
            format: 'yyyy-mm-dd'
        }).on('changeDate', function (ev) {
            $(this).datetimepicker('hide');
    });

  $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();
  });

</script>

{% endblock %}
